<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: space-around;
        }
        .container{
            height: 500px;
            line-height: 500px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <ul>
            <router-link tag="li" to="/ticket">售票处</router-link>
            <router-link tag="li" to="/elephont">大象区域</router-link>
            <router-link tag="li" to="/tigerArea">老虎区域</router-link>
            <router-link tag="li" to="/pandaArea">熊猫区域</router-link>
            <router-link tag="li" to="/">猴子区域</router-link>
        </ul>
        <router-view class="container"></router-view>
    </div>
    <script src="./js/vue.js"></script>
    <script src="./js/vue-router.js"></script>
    <script>
        // 假设有一个动物园 动物园中有 售票处 大象区域 老虎区域 熊猫区域 猴子区域

        // 假设看老虎和熊猫需要门票 看大象和猴子不需要门票
        
        var hasTicket = false  // 用来记录游客是否买票 false表示没有买票
        const ticketArea = {
            template: `
                <div>售票区</div>
            `
        }

        const eleArea = {
            template: `
                <div>大象区域</div>
            `
        }

        const tigerArea = {
            template: `
                <div>老虎区域</div>
            `
        }

        const pandaArea = {
            template: `
                <div>熊猫区域</div>
            `
        }

        const monkeyArea = {
            template: `
                <div>猴子区域</div>
            `,
            data() {
                return {
                    msg: 'hello world'
                }
            },
            beforeRouteEnter (to, from, next) {
                // ...
                // console.log(this)
                next(vm => {
                    console.log(vm) // 就是组件的实例
                })
            },


            // beforeRouteUpdate(to, from, next) {

            // },


            // beforeRouteLeave (to, from, next) {
            //     // ...
            // }
        }

        const routes = [
            {
                path: '/',
                meta: {
                    isNeedTicket: false
                },
                component: monkeyArea
            },
            {
                path: '/ticket',
                beforeEnter: (to, from, next) => {
                    alert('本动物园存在免费区域,手否确定买票...')
                    next()
                },
                component: ticketArea
            },
            {
                path: '/elephont',
                meta: {
                    isNeedTicket: false
                },
                component: eleArea
            },
            {
                path: '/tigerArea',
                meta: {
                    isNeedTicket: true
                },
                component: tigerArea
            },
            {
                path: '/pandaArea',
                meta: {
                    isNeedTicket: true
                },
                component: pandaArea
            }
        ]
        let router = new VueRouter({
            routes
        })

        // 全局导航守卫
        // 全局前置守卫 最常用的守卫
        router.beforeEach((to, from, next) => {
            // alert('这里是全局前置守卫')
            // to 要去的页面的路由对象 from 要离开的页面的路由对象 next下一步
            // if(to.path == "/tigerArea" || to.path == "/pandaArea") {
            //     if(hasTicket) {
                    
            //         next()
            //     } else {
            //         // next() 跳转页面符合 路由跳转的所有规则
            //         alert('该区域为收费区域,请先买票...')
            //         next({
            //             path: '/ticket'
            //         })
            //     }
            // } else {
            //     next()
            // }
            // if(to.meta.isNeedTicket) {
            //     if(hasTicket) {
            //         next()
            //     } else {
            //         // next() 跳转页面符合 路由跳转的所有规则
            //         alert('该区域为收费区域,请先买票...')
            //         next({
            //             path: '/ticket'
            //         })
            //     }
            // } else {
            //     next()
            // }
            if(to.matched.some(item => item.meta.isNeedTicket)) {
                if(hasTicket) {
                    next()
                } else {
                    alert('该区域为收费区域,请先买票...')
                    next({
                        path: '/ticket'
                    })
                }
            } else {
                next()
            }
        })


        // 全局解析守卫 router.beforeResolve((to, from, next) => {})

        // 全局后置守卫 router.afterEach((to, from) => {})

        // beforeEnter 路由独享守卫


        // 组件内守卫
        // beforeRouteEnter()
        new Vue({
            el: '#app',
            router,
            data: {}
        })
    </script>
</body>
</html>